<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="container">
    <!-- 显示闪存消息 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <ul class="flashes" id="flashes">
                {% for category, message in messages %}
                    <li class="{{ category }}">{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
    <span></span>
    <span></span>
    <span></span>
    <form id="signinForm" action="{{ url_for('login') }}" method="POST">
        <h2>WELCOME</h2>
        <div class="inputBox">
            <input type="text" placeholder="账号" name="user_id">
        </div>
        <div class="inputBox">
            <input type="password" placeholder="密码" name="password">
        </div>
        <div class="inputBox">
            <input type="submit" value="登录">
        </div>
        <div class="inputBox group">
            <p style="padding-left: 60px;">没有账号？ 点击<a href="#" id="signup">注册</a></p>
        </div>
    </form>

    <form id="signupForm" action="{{ url_for('register') }}" method="POST">
        <h2>WELCOME</h2>
        <div class="inputBox">
            <input type="text" placeholder="账号" name="user_id" required>
        </div>
        <div class="inputBox">
            <input type="password" placeholder="密码" name="password" required>
        </div>
        <div class="inputBox">
            <input type="password" placeholder="确认密码" name="confirm_password" required>
        </div>
        <div class="inputBox">
            <input type="submit" value="确定">
        </div>
        <div class="inputBox group">
            <a href="#" style="padding-left: 60px;">账户已存在? 点击 <b id="signin">登录</b></a>
        </div>
    </form>
</div>

<script>
    // 获取闪存消息元素
    const flashes = document.getElementById('flashes');

    // 如果存在闪存消息，设置定时器来隐藏
    if (flashes) {
        setTimeout(() => {
            flashes.style.display = 'none';  // 隐藏闪存消息
        }, 3000);  // 3000毫秒 = 3秒
    }

    let signup = document.querySelector('#signup');
    let signin = document.querySelector('#signin');
    let body = document.querySelector('body');
    signup.onclick = function () {
        body.classList.add('signup');
    }
    signin.onclick = function () {
        body.classList.remove('signup');
    }
</script>
</body>
</html>
